<template>
   <div style="padding-top:46px">
     <!-- 顶部导航栏 -->
    <van-nav-bar title="设置支付密码" fixed>
      <van-icon name="arrow-left" slot="left" color="#333" @click="back"/>
    </van-nav-bar>
    <p>输入6位数字作为支付密码，此密码用于余额体现等操作</p>
    <!-- 密码输入框 -->
    <van-password-input
    :value="payPassword"
    @focus="showKeyboard = true"
    />
    <p><button @click="submitPayPassword">下一步</button></p>
    <!-- 数字键盘 -->
    <van-number-keyboard
      :show="showKeyboard"
      @input="onInput"
      @delete="onDelete"
      @blur="showKeyboard = false"
    />
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import { updateBeeUser } from "services/beeUser";
import { setToastTimer } from "framework/utils/utils";

export default {
  name:"setpaypassword",
  data() {
    return {
      payPassword: '',
      showKeyboard: true
    };
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    back(){
      this.$router.go(-1);
    },
    onInput(key) {
      this.payPassword = (this.payPassword + key).slice(0, 6);
    },
    onDelete() {
      this.payPassword = this.payPassword.slice(0, this.payPassword.length - 1);
    },
    submitPayPassword() {
      const { payPassword, userInfo: { userNo } } = this;
      updateBeeUser({
        userNo,
        payPassword,
        codeType: "paymentPassword"
      }).then(() => {
        this.$toast({
          message: "设置支付密码成功！",
          duration: 1000,
          forbidClick: true
        });
        setToastTimer(() => {
          this.$store.dispatch("refreshUserInfo", this.userInfo);
          this.$router.replace("/setmessage");
        }, 1000);
      });
    }
  }
}
</script>
<style lang="less" scoped>
p{
  padding-left:30px;
  font-size:24px;
  color: #999999;
}
button{
  width:690px;
  height:90px;
  background-color:#fbcb82;
  border:none;
  border-radius: 50px;
  font-size:32px;
  color:#ffffff;
  margin-top:52px;
}
</style>
